<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .myDiv{width: 600px;height:600px;font-size: 3em;background-color: rgb(200,94,55);}
        /*背景颜色  属性：background-color    作用：设置元素的背景颜色；属性值可以是关键词（red、green、yellow......）；也可以是十六进制表
示法，十六进制表示法以 # 开头，每两位表示rgb表示法中的一位，每一位都是一个十六进制数字，十六进制表示法可以进行缩写，如果每两位都相同，那么就可以
将两位缩写为一位；还可以是rgb表示法，r、g、b分别表示红、绿、蓝三种颜色在最终混出的颜色中所占的比例，每一位的取值范围为0~255 闭区间；rgba表示法增
加了alpha通道，alpha通道设置透明度，透明度的取值为 0~1 闭区间。
使用方法：
color: red;
color: #ff0000;
color: #f00;
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 1);
color: rgba(255, 0, 0, 0.5);*/
        .myDiv:hover{color:blue;background-image: url(./photo/0040jbadgy1gyop1osg68j630p20mx6p02.jpg);background-repeat:no-repeat;
        background-position:center ;}
        /*背景图片  属性：background-image    作用：设置元素的背景图片。  使用方法：background-image: url(../1.jpg);

        背景重铺    属性：background-repeat   作用：设置元素背景图片的重铺模式。
background-repeat: inherit;规定应该从父级元素继承background-repeat属性的设置
background-repeat: repeat;默认。图片将在水平和垂直方向重复
background-repeat: repeat-x;背景图片将在水平方向重复
background-repeat: repeat-y;背景图片将在垂直方向重复
background-repeat: no-repeat;背景图片将只显示一次

        背景定位    属性：background-position  作用：设置图像在背景中的位置（水平位置、垂直位置）；属性值有两类：
        1. 关键字：仅规定一个关键字时，第二个关键字将默认是center      单一关键字（与其等价的关键字）：center(center center), 
top(top center或center top), bottom(bottom center或center top),right(right center或center right), left(left center或center left)
        2. 长度值：距离元素左上角的距离，第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。
使用方法：background-position: 30px 50px;
         background-position: left;

        背景综合属性   属性：background    功能：在一个声明中设置所有背景属性。
使用方法：background: #0ae6ba url(../1-2.jpg) no-repeat 50px 300px;
         background: #0ae6ba url(../1-2.jpg) no-repeat center;
         background: #0ae6ba url(../1-2.jpg) no-repeat left bottom;
*/
        ul{list-style-image: url(./photo/008tZwmWgy1hhw8v7sjz5j30f00f0gnp.jpg);}
        /*列表标记类型   属性：list-style-type   功能：设置列表项标记的类型。  属性值有none(无标记)、disc（默认。标记是实心圆）、circle（标
记是空心圆）、square（标记是实心方块）、decimal（标记是数字）、decimal-leading-zero（0开头的数字标记，如01、02、03等）、lower-roman（小写罗
马数字，如i,ii,iii,iv,v,vi等）、upper-roman（大写罗马数字，如I,II,III,IV,V,VI等）
使用方法：    list-style-type: none;      list-style-type: circle;
       
         列表标志图像    属性：list-style-image   功能：使用图像来替换列表项的标志。
使用方法：list-style-image: url(../1-2.jpg);

        列表标志位置     属性：list-style-position  功能：设置列表标记的位置；属性值有outside(默认值，标记位于文本的左侧)和inside(标记放置
在文本以内)。
使用方法：ul {list-style-position: inside;}   li {background-color: #cabfee;}
        列表综合属性     属性：list-style   功能：在一个声明中设置所有列表属性
使用方法：list-style: url(../1-2.jpg) inside;
         list-style: circle inside;
         list-style: inside;
         list-style: circle;

*/
    </style>
</head>
<body background="./photo/008utPNkly1hgcr42omb9j31jk226nga.jpg">
   <P class="myDiv">期待kiku花间令and仙剑四！</P> 
   <ul class="myDiv">
    <li>妲己</li>
    <li>大乔</li> 
    <li>嫦娥</li>
    <li>甄姬</li>
    <li>海月</li>
   </ul>
</body>
</html>